<template>
  <div class="userBox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="box-card">

      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="userListParams.query" class="input-with-select" :clearable="true"
            @clear="handleSearchUser">
            <el-button slot="append" icon="el-icon-search" @click="handleSearchUser"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="addUserdialogVisible = true">新增用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表-表格 -->
      <el-table :data="userTableData" stripe style="width: 100%">
        <!-- 表格展开列 -->
        <el-table-column type="expand" width="50">
          <template v-slot="scope">{{ scope.row }}</template>
        </el-table-column>
        <!-- 表格索引列 -->
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="role_name" label="角色名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号">
        </el-table-column>
        <el-table-column label="可用状态">
          <!-- 作用域插槽获取当前mg_state的布尔值 -->
          <template v-slot="{ row }">
            <el-switch v-model="row.mg_state" active-color="#13ce66" inactive-color="#ff4949"
              @change="handleUpdateMgState(row)"></el-switch>
            <!-- {{ row }} -->
          </template>

        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <!-- 在这里添加作用域插槽实现时间戳的处理 -->
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <!-- 作用域插槽获取当前数据的id -->
          <template v-slot="{ row }">
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" circle @click="handleOpenEditDialog(row)"></el-button>
            </el-tooltip>

            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" circle @click="handleDeleteUser(row)"></el-button>
            </el-tooltip>

            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" circle @click="handleOpenSetRoleDialog(row)"></el-button>
            </el-tooltip>
          </template>

        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="userListParams.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="userListParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </el-card>

    <!-- 新增用户对话框(模态框) -->
    <el-dialog title="新增用户" :visible.sync="addUserdialogVisible" width="30%" :before-close="handleClose">

      <!-- 新增用户表单区域 -->
      <el-form ref="addUserFormEle" :model="addUserForm" :rules="addUserRules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addUserForm.mobile"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户对话框(模态框) -->
    <el-dialog title="修改用户" :visible.sync="editUserdialogVisible" width="30%" :before-close="handleEditClose">

      <!-- 修改用户表单区域 -->
      <el-form ref="editUserFormEle" :model="editUserForm" :rules="editUserRules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editUserForm.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editUserForm.mobile"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配角色对话框(模态框) -->
    <el-dialog title="分配角色" :visible.sync="setRoledialogVisible" width="30%" :before-close="handleSetRoleClose">

      <!-- 分配角色内容区域 -->
      <div class="userInfoContent">
        <p><span>用户名:</span>{{ userInfo.username }}</p>
        <p><span>当前角色:</span>{{ userInfo.role_name }}</p>
        <p>
          <span>新角色:</span>
          <!-- 下拉菜单 el-select组件 -->
          <el-select v-model="newRoleId" placeholder="请选择">
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
            </el-option>
          </el-select>
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoledialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSetRole">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'UsersView',
  data: function () {

    // 校验手机号的方法
    function checkMobile(rule, value, callback) {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else if (!/^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/.test(value)) {
        return callback(new Error('手机号不合法'))
      } else {
        callback()
      }
    }

    // 校验邮箱的方法
    function checkEmail(rule, value, callback) {
      if (!value) {
        return callback(new Error('邮箱不能为空'));
      } else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        return callback(new Error('邮箱不合法'))
      } else {
        callback()
      }
    }

    return {
      // 表格数据
      userTableData: [],
      // 用户列表查询参数,
      userListParams: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      // 所有用户个数
      total: 0,
      // 新增用户对话框可见性
      addUserdialogVisible: false,
      // 新增用户参数
      addUserForm: {
        username: '',
        password: '',
        mobile: '',
        email: ''
      },
      // 新增用户校验规则
      addUserRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },  // 校验必填，非空
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }  // 校验字符必须是3-5个
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },  // 校验必填，非空
          { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' }  // 校验字符必须是6个
        ],
        // mobile和email需要自定义规则-也就是正则校验
      },

      // 编辑用户模态框
      editUserdialogVisible: false,
      // 编辑用户参数
      editUserForm: {
        username: '',
        email: '',
        mobile: ''
      },
      // 校验规则
      editUserRules: {
        mobile: [{ required: true, validator: checkMobile, trigger: 'blur' }],
        email: [{ required: true, validator: checkEmail, trigger: 'blur' }],
      },
      // 当前编辑的用户id
      userId: null,

      // 分配角色对话框显示
      setRoledialogVisible: false,

      // 需要分配的角色信息
      userInfo: {
        username: '',
        role_name: '',
      },

      // 所有角色类型数据
      roleList:[],

      // 选中的新角色id
      newRoleId:null

    }
  },
  methods: {
    // 获取所有角色数据
    async getRoleList(){
      const {data,meta:{status}} = await this.$http.get('roles')
      console.log(data,status)
      if(status!==200){
        return this.$message.error('获取角色信息失败，请稍后再试!')
      }
      // 将获取到的角色数据处理之后赋值给roleList
      this.roleList = data

    },

    // 点击分配角色按钮
    handleOpenSetRoleDialog(row) {
      console.log(row)
      // 当前需要分配角色的用户id
      this.userId = row.id
      // 设置当前需要分配的角色信息
      this.userInfo.username = row.username
      this.userInfo.role_name = row.role_name
      // 显示对话框
      this.setRoledialogVisible = true

      // 获取所有的角色列表
      this.getRoleList()

    },

    // 确认分配角色按钮
    async handleSetRole() {
      console.log(this.userId,this.newRoleId)
      // 如果newRoleId为空
      if(!this.newRoleId){
        return this.$message.error('请选择新角色!')
      }

      // 发起给用户分配角色的请求
      const {meta:{msg,status}} = await this.$http.put(`users/${this.userId}/role`,{rid:this.newRoleId})
      console.log(msg,status)
      if(status!==200){
        return this.$message.error(msg)
      }

      this.$message.success(msg)

      // 关闭对话框
      this.setRoledialogVisible = false

      // 更新数据
      this.getUserList()

      // 将newRoleId置空
      this.newRoleId = null
    },

    // 关闭分配角色对话框
    handleSetRoleClose() {
      this.$confirm('确认关闭？')
        .then(() => {
          this.setRoledialogVisible = false
        })
    },

    // 点击编辑用户按钮
    handleOpenEditDialog(row) {
      // console.log(row)
      // 存储当前编辑的用户id
      this.userId = row.id
      // 把当前编辑的数据，对应的字段赋值给editUserForm让数据回显
      this.editUserForm.username = row.username
      this.editUserForm.email = row.email
      this.editUserForm.mobile = row.mobile
      // 显示编辑用户对话框
      this.editUserdialogVisible = true
    },

    // 编辑用户对话框关闭
    handleEditClose() {
      this.$confirm('确认关闭？')
        .then(() => {
          this.editUserdialogVisible = false
        })
        .catch(() => { });
    },

    // 提交用户修改的按钮
    handleEditUser() {
      // 获取当前编辑对话框然后进行校验，校验通过之后再发送编辑用户提交
      this.$refs.editUserFormEle.validate(async (bol) => {
        if (bol) {
          const { meta: { msg, status } } = await this.$http.put(`users/${this.userId}`, this.editUserForm)
          if (status !== 200) {
            return this.$message.error(msg)
          }
          this.$message.success(msg)
          // 关闭编辑用户对话框
          this.editUserdialogVisible = false;
          // 清空对话框 -- 在这里没有必要，但是要记住存在这个重置方法  -- 区别于直接操作editUserForm数据，这次可以直接调用form的重置方法
          // this.$refs.editUserFormEle.resetFields()
          // 更新数据
          this.getUserList()
        }
      })
    },

    // 单个用户删除
    handleDeleteUser(user) {
      // 删除操作比较敏感，给个confirm框确定
      this.$confirm('确认删除？')
        .then(async () => {
          // 调用删除接口
          const { meta } = await this.$http.delete('users/' + user.id)
          //                                          `users/${user.id}`
          // console.log(meta)
          if (meta.status !== 200) {
            // 删除失败
            return this.$message.error(meta.msg)
          }

          this.$message({
            message: meta.msg,
            type: 'success'
          })

          // 重新请求删除之后的数据
          this.getUserList()

        })
    },

    // 确定新增用户按钮的业务
    handleAddUser() {
      this.$refs.addUserFormEle.validate(async val => {  // 所有校验条件都通过就会返回true,只要有一个表单不符合要求就是false
        // console.log(val)
        if (val) {
          // 如果校验通过就去调用添加用户接口
          const { meta } = await this.$http.post('users', this.addUserForm)
          // console.log(data, meta)
          if (meta.status !== 201) {
            // 添加用户失败
            return this.$message.error(meta.msg)
          }

          // 把新增用户对话框关闭
          this.addUserdialogVisible = false

          // 在这里清空新增表单
          this.addUserForm = {
            username: '',
            password: '',
            mobile: '',
            email: ''
          }

          this.$message({
            message: meta.msg,
            type: 'success'
          })
          // console.log(data)
        }
      })
    },

    // 在点击右上角x按钮 或者 对话框的背景时触发的事件
    handleClose() {

      this.$confirm('确认关闭？')
        .then(() => {
          this.addUserdialogVisible = false
        })
        .catch(() => { });
    },

    // 获取用户列表数据
    async getUserList() {
      const res = await this.$http.get('users', { params: this.userListParams })
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }

      // 当前所有用户数组
      this.userTableData = res.data.users
      // 当前用户总数
      this.total = res.data.total
    },

    // 修改当前用户的状态
    async handleUpdateMgState(user) {
      // console.log(user)
      // 拿user的id和mg_state(是已经更改之后的状态)
      const res = await this.$http.put(`users/${user.id}/state/${user.mg_state}`)
      // console.log(res)
      // 如果mg_state状态修改失败，一定要将当前数据row中的mg_state设置为修改之前的值（也就是取反）
      if (res.meta.status !== 200) {
        this.$message.error('修改状态失败，请稍后再试!')
        user.mg_state = !user.mg_state
      }
    },

    // 分页每页条数改变
    handleSizeChange(val) {
      // console.log('条数改变!'+val)
      this.userListParams.pagesize = val
      this.getUserList()
    },
    // 当前页码改变触发
    handleCurrentChange(val) {
      // console.log('页码改变触发'+val);
      this.userListParams.pagenum = val
      this.getUserList()
    },

    // 用户查询
    handleSearchUser() {
      this.getUserList()
    }
  },
  mounted() {
    this.getUserList()
  }
}
</script>

<style lang="less" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.userInfoContent {
  line-height: 50px;

  span {
    display: inline-block;
    width: 80px;
    text-align: left;
  }
}
</style>